<template>
  <div class="count">
    <h2>当前求和为:{{ sum }},放大10倍后的数：{{ bigSum }}</h2>
    <h3>欢迎来到{{ school }},位置:{{ address }},大写是:{{ upperSchool }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="minus">-</button>
  </div>
</template>

<script setup lang="ts" name="">
  import { ref } from 'vue';

  import { storeToRefs } from 'pinia';
  import { useCountStore } from '@/store/count';

  
  let countStore = useCountStore()
  //storeToRefs只关注store中的数据，不会对方法进行ref包装
  let {sum,school,address,bigSum,upperSchool} = storeToRefs(countStore)

  let n = ref(1)

  function add() {
    // //第一种修改
    // countStore.sum += n.value
    // countStore.school = 'lalala小魔仙'
    // countStore.address = '北京'

    //第二种，批量修改
    // countStore.$patch({
    //   sum : n.value,
    //   school : 'lalala小魔仙',
    //   address : '北京'
    // })

    //第三种方式修改
    countStore.increment(n.value)

  }
  function minus() {
    countStore.sum -= n.value
  }

</script>

<style scoped>
.count {
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}

button,
select {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>